<template>
  <div class="common-page layout-view">
    <div class="case-block">
      <div class="title">anime.js</div>
      <h4>点击下面红色方块</h4>
      <div class="sample first">
        <div ref="a" class="move-obj" @click="moveFirst"></div>
      </div>
      <h4>点击按钮<button @click="moveSecond">run</button></h4>
      <div class="sample second">
        数据变化： <strong>{{ testNum }}</strong>
      </div>
      <div class="sample second">
        <input v-model="testNum" type="text" />
      </div>  
    </div>
  </div>
</template>
<style scoped lang="stylus">
// @import '../../../../styles/mixins.styl'

.case-block
  width 100%
  padding 10px;
  border-bottom 1px solid lightgray
  .title
    font-size: 18px
    font-weight bold

.move-obj
  width 100px 
  height 100px
  background red
   
</style> 
<script>
import anime from 'animejs'
export default {
  name: 'AnimeJSView',
  props: {

  },
  data () {
    return {
      testNum: 0
    }
  },
  computed: {
    
  },
  watch: {
    // testNum(val) {
    //   console.log('updating', val)
    // }
  },
  created() {
  },
  mounted() {
  },
  
  methods: {
    moveFirst(ev) {
      anime({
        targets: ev.target,
        // backgroundColor: 'rgba(255,255,0,1)',
        translateX: {
          value: 250,
          easing: 'easeInOutSine',
          duration: 1000
        },
        borderRadius: {
          value: ['0%', '50%'],
          easing: 'easeInOutSine',
          duration: 2000
        }
        
        // duration: 5000
      })
    },
    moveSecond() {
      anime({
        targets: this.$data,
        testNum: 20,
        round: 1,
        easing: 'linear'  
      })
    }
  }
}
</script>
